<template>
  <div class="app-container">
    <el-form ref="queryForm" :inline="true">
      <el-form-item>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['organization:grade:add']"
        >新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="grades">
      <el-table-column prop="gradeCode" label="职级编码" width="200" align="center"></el-table-column>
      <el-table-column prop="gradeName" label="职级名称"  align="center"></el-table-column>
      <el-table-column prop="sort" label="职级排序"  align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="createTime" width="200" align="center">
        <template slot-scope="scope">
          <span class="org-oper">
            <el-button
              size="mini"
              type="primary"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['organization:grade:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              v-hasPermi="['organization:grade:remove']"
            >删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
     background
      @current-change="handleCurrentChange"
      :current-page="queryParams.current"
       :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 编辑组件 -->
    <edit v-if="editData.open" :prop="editData" @close="closeEditPanel"></edit>
  </div>
</template>
<script>
  import {getPageList,del} from '@/api/organization/grade/grade.js'
  import edit from '@/views/organization/grade/edit.vue'
  export default {
    name: "GradeIndex",
    dicts: [],
    components: { edit },
    data() {
      return {
        queryParams:{
          current:1,
          size:10,
        },
        grades:[],
        open:false,
        total:0,
        editData:{
          title:'新增',
          open:false,
          editId:null
        },
      };
    },
    mounted() {
      this.getPageList()
    },
    methods: {
      getPageList(){
        getPageList(this.queryParams).then(res =>{
          let data = res.data
          this.grades = data.records;
          this.total = data.total
        }).catch(err =>{
          console.log('查询职级分页数据失败，原因：',err)
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getPageList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 切换页码
      handleSizeChange(val) {
        this.queryParams.size = val;
        this.getPageList();
      },
      // 翻页
      handleCurrentChange(val) {
        this.queryParams.current = val;
        this.getPageList();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.editData = {
          title:'新增',
          open:true,
          editId:null,
        }
      },
      closeEditPanel(isSaveData){
        this.editData = {
          title:'新增',
          open:false,
          editId:null,
        }
        //如果更新了数据重新加载
        if(isSaveData){
          this.getPageList()
        }
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.editData = {
          title:'修改',
          open:true,
          editId:row.gradeId,
        }
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del({gradeId:row.gradeId}).then(res =>{
            this.$modal.msgSuccess("删除成功");
            this.getPageList();
          }).catch(err =>{
            console.log('删除职级失败，原因：',err)
          })
        }).catch((err) => {
          console.log('删除失败原因：',err)
        });
      },
    }
  };
</script>
<style scoped>
.el-pagination {
  margin-top: 20px;
  float: right;
}
</style>
